import React, { useEffect, useState } from 'react';
import { Collapse, Table } from '@arco-design/web-react';
const CollapseItem = Collapse.Item;

const columns = [
  {
    title: '表名',
    dataIndex: 'tablename',
  },
  {
    title: '注释',
    dataIndex: 'comment',
  },
]

const Step1 = (props) => {
  const [selectedAddRowKeys, setSelectedAddRowKeys] = useState(['4']);
  const [selectedEditRowKeys, setSelectedEditRowKeys] = useState(['4']);
  const [res, setRes] = useState(props.compareRes)
  console.log('compare res',res)
  return (
    <Collapse
      defaultActiveKey={['1', '2']}
      style={{ maxWidth: 1180 }}
    >
      <CollapseItem header='新增表' name='1' contentStyle={{padding: 0}}>
        <Table
          rowKey='id'
          size='small'
          columns={columns}
          data={res.addTables}
          pagination={false}
          rowSelection={{
            type: 'checkbox',
            selectedRowKeys: selectedAddRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
              console.log('onChange:', selectedRowKeys, selectedRows);
              setSelectedAddRowKeys(selectedRowKeys);
            },
            onSelect: (selected, record, selectedRows) => {
              console.log('onSelect:', selected, record, selectedRows);
            },
          }}
        />
      </CollapseItem>

      <CollapseItem header='修改表' name='2' contentStyle={{padding: 0}}>
        <Table
          rowKey='id'
          size='small'
          columns={columns}
          data={res.modifiedTables}
          pagination={false}
          rowSelection={{
            type: 'checkbox',
            selectedRowKeys: selectedEditRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
              console.log('onChange:', selectedRowKeys, selectedRows);
              setSelectedEditRowKeys(selectedRowKeys);
            },
            onSelect: (selected, record, selectedRows) => {
              console.log('onSelect:', selected, record, selectedRows);
            },
          }}
        />
      </CollapseItem>
      <CollapseItem header='删除表' name='1' contentStyle={{padding: 0}}>
        <Table
          rowKey='id'
          size='small'
          columns={columns}
          data={res.deleteTables}
          pagination={false}
          rowSelection={{
            type: 'checkbox',
            selectedRowKeys: selectedAddRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
              console.log('onChange:', selectedRowKeys, selectedRows);
              setSelectedAddRowKeys(selectedRowKeys);
            },
            onSelect: (selected, record, selectedRows) => {
              console.log('onSelect:', selected, record, selectedRows);
            },
          }}
        />
      </CollapseItem>

      <CollapseItem header='没有变更的表' name='3' contentStyle={{padding: 0}}>
        <Table
          rowKey='id'
          size='small'
          columns={columns}
          data={res.unChangedTables}
          pagination={false}
        />
      </CollapseItem>
    </Collapse>
  );
};

const mock = [
  {
    id: 'tableA',
    tablename: 'tableA',
    comment: '表一',
  },
  {
    id: 'tableB',
    tablename: 'tableB',
    comment: '表二',
  },
  {
    id: 'tableC',
    tablename: 'tableC',
    comment: '表三',
  },
]
export default Step1;
